<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .cbox{
            border: 1px solid #999;
            padding: 20px;
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>props的取值</h4>
        <ul>
            <li>取值Array:数组的元素以字符串的方式描述需要从$attrs中拦截的属性名</li>
            <li>
                取值Object:构建带有校验的数据拦截【props的数据检验工不是业务校验功能，是针对程序员的提示功能】 <br>
                对象定义中的属性名为需要从$attrs中拦截的属性名 <br>
                对象属性的取值为Object对象数据，对象数据可以是空对象，表示不完成任何数据校验；可以取值固定对象完成特定数据校验 <br>
                <pre>
                {
                    type:JS数据构造器-校验拦截的数据类型,
                    required:必传属性-默认值为false,当取值为true时表示数据为必传数据,
                    default:默认值定义-当对应拦截属性未传递时，使用默认值,如果数据为引用类型数据，默认值必须以工厂函数方式返回默认值
                    validator:提供数据校验回调函数，通过回调函数方式完成自定义的数据格式校验;返回true表示校验通过，返回false表示校验失败
                }
                </pre>

            </li>
        </ul>
        <h4>props中定义的变量为只读属性</h4>
        <p>msg:{{ msg }}</p>
        <p>num:{{ num }}
            <input type="button" value="setNumToString" @click="num='aa'">
        </p>
        <p>text:{{ text }}
            <input type="button" value="setTextToArray" @click="text=[1,2,3,4]" >
            <input type="button" value="setTextToNumber" @click="text=100">
        </p>
        <p>age:{{ age }}
            <input type="button" value="age++" @click="age++" >
            <input type="button" value="age--" @click="age--">
        </p>
        <hr>
        <!-- <child-comp 
            :msg="msg" 
            :num="num" 
            :info="text"
            :arg="100"
        ></child-comp> -->
        <child-comp 
            :msg="msg" 
            :num="num" 
            :info="text"
            arg="100"
            arg1="传递的数据"
            :age="age"
        ></child-comp>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    msg:"测试",
                    num:100,
                    text:"text数据",
                    age:1
                }
            },
            components: {
                ChildComp:{
                    template:`
                        <div class="cbox">
                            <p>组件ChildComp</p>
                            <p>msg:{{ msg }}</p>
                            <input type="text" v-model="msg">
                            <p>num:{{ num.toFixed(2) }}</p>
                            <p>info:{{ info }}</p>
                            <p>arg:{{ arg }}</p>
                            <p>age1:{{ arg1 }}</p>
                            <p>user:{{ user }}</p>
                            <p>age:{{ age }}</p>
                        </div>
                    `,
                    // props:["msg"],
                    props:{
                        msg:{},  // 等效于props数组取值规则
                        num:{
                            type:Number
                        },
                        info:{
                            type:[String,Boolean,Array],
                        },
                        arg:{
                            required:true
                        },
                        arg1:{
                            default:"默认值"
                        },
                        user:{
                            type:Object,
                            // default:{}
                            default(){
                                return {}
                            }
                        },
                        age:{
                            type:Number,
                            default:18,
                            validator(arg){
                                // console.log(arg);
                                // return true
                                // return arg>=0&&arg<=100

                                if(arg<0||arg>100){
                                    console.warn("age属性的有效取值为Number类型数据，且范围在0~100之间");
                                }
                                return true;
                            }
                        }
                    }
                },
            },
        }).mount("#app")
    </script>
</body>
</html>